<template>
  <view class="order-detail-container">
    <!-- 订单基本信息 -->
    <view class="order-info-section">
      <view class="section-title">订单信息</view>
      <view class="info-item">
        <text class="info-label">订单号：</text>
        <text class="info-value">{{ orderData.orderNumber }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">服务项目：</text>
        <text class="info-value">{{ orderData.serviceItem }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">下单时间：</text>
        <text class="info-value">{{ orderData.orderTime }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">预约时间：</text>
        <text class="info-value">{{ orderData.appointmentTime }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">车辆：</text>
        <text class="info-value">{{ orderData.vehicle }}</text>
      </view>
      <view class="info-item" v-if="orderData.remark">
        <text class="info-label">备注：</text>
        <text class="info-value">{{ orderData.remark }}</text>
      </view>
    </view>

    <!-- 订单详情 -->
    <view class="order-detail-section">
      <view class="section-title">订单详情</view>
      <view class="detail-item" v-for="(item, index) in orderData.items" :key="index">
        <text class="item-name">{{ item.name }}</text>
        <text class="item-price">¥{{ item.price }}</text>
      </view>
    </view>

    <!-- 价格明细 -->
    <view class="price-section">
      <view class="section-title">价格明细</view>
      <view class="price-item">
        <text class="price-label">原价</text>
        <text class="price-value">¥{{ orderData.originalPrice.toFixed(2) }}</text>
      </view>
      <view class="price-item">
        <text class="price-label">优惠</text>
        <text class="price-discount">-¥{{ orderData.discount.toFixed(2) }}</text>
      </view>
      <view class="price-item total">
        <text class="price-label">实付金额</text>
        <text class="price-total">¥{{ orderData.paymentAmount.toFixed(2) }}</text>
      </view>
    </view>

    <!-- 评价结果 -->
    <view class="review-section" v-if="orderData.review">
      <view class="section-title">评价结果</view>
      <view class="review-content">
        <view class="review-time">
          评价时间：{{ orderData.review.reviewTime }}
        </view>
        <view class="review-stars">
          <text class="stars-label">评价结果：</text>
          <view class="stars">
            <text 
              v-for="n in 5" 
              :key="n"
              class="star"
              :class="{ active: n <= orderData.review.starRating }"
            >
              ★
            </text>
          </view>
        </view>
        <view class="review-comment">
          <text class="comment-label">评语：</text>
          <text class="comment-text">{{ orderData.review.comment }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 订单数据结构
interface OrderItem {
  name: string;
  price: number;
}

interface OrderReview {
  reviewTime: string;
  starRating: number;
  comment: string;
}

interface OrderData {
  orderNumber: string;
  serviceItem: string;
  orderTime: string;
  appointmentTime: string;
  vehicle: string;
  remark?: string;
  items: OrderItem[];
  originalPrice: number;
  discount: number;
  paymentAmount: number;
  review?: OrderReview;
}

// 订单数据
const orderData = ref<OrderData>({
  orderNumber: '',
  serviceItem: '',
  orderTime: '',
  appointmentTime: '',
  vehicle: '',
  items: [],
  originalPrice: 0,
  discount: 0,
  paymentAmount: 0
});

// 模拟获取订单数据
const fetchOrderData = (orderNumber: string) => {
  // 这里应该是从服务器获取订单数据的API调用
  // 目前返回模拟数据，确保包含所有必需字段
  const items = [
    {
      name: '车辆常规保养',
      price: 199.00
    },
    {
      name: '发动机检查',
      price: 50.00
    }
  ];
  const paymentAmount = 249.00;
  const originalPrice = 299.00;
  const discount = originalPrice - paymentAmount;
  
  return {
    orderNumber,
    serviceItem: '车辆常规保养',
    orderTime: '2023-10-15 14:30:00',
    appointmentTime: '2023-10-20 09:00:00',
    vehicle: '粤A12345',
    items,
    originalPrice,
    discount,
    paymentAmount,
    review: {
      reviewTime: '2023-10-21 16:20:00',
      starRating: 5,
      comment: '服务很好，技师很专业，下次还会再来。'
    }
  };
};

onMounted(() => {
  // 获取路由参数中的订单号
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1] as any;
  const orderNumber = currentPage?.options?.orderNumber as string;
  
  // 获取eventChannel并监听review数据
  const eventChannel = currentPage?.getOpenerEventChannel();
  if (eventChannel) {
    // 监听acceptReviewData事件
    eventChannel.on('acceptReviewData', function(data: { review: any }) {
      console.log('接收到的review对象:', data.review);
      const review = data.review;
      const orderServiceDTO = review.orderServiceDTO || {};
      
      // 计算订单价格和优惠金额（参考verification页面的计算逻辑）
      let paymentAmount = parseFloat(orderServiceDTO.price) || 0; // 实付金额
      let originalPrice = paymentAmount; // 原价默认等于实付金额
      let discount = 0; // 优惠金额
      
      // 根据优惠券类型计算
      if (orderServiceDTO.type === '0') {
        // 打折类型：订单价格 = 实付金额 / 折扣
        if (orderServiceDTO.discount && orderServiceDTO.discount > 0 && orderServiceDTO.discount < 1) {
          originalPrice = paymentAmount / orderServiceDTO.discount;
          discount = originalPrice - paymentAmount;
        }
      } else if (orderServiceDTO.type === '1') {
        // 满减类型：订单价格 = 实付金额 + 优惠金额
        const preferentialMoney = orderServiceDTO.preferentialMoney || 0;
        originalPrice = paymentAmount + preferentialMoney;
        discount = preferentialMoney;
      }
      
      // 映射review数据到orderData
      orderData.value = {
        orderNumber: review.orderId || orderNumber,
        serviceItem: orderServiceDTO.name || '服务项目',
        orderTime: review.createTime || '',
        appointmentTime: orderServiceDTO.reservationTime || '',
        vehicle: orderServiceDTO.carNum || '未知车辆',
        items: [
          {
            name: orderServiceDTO.name || '服务项目',
            price: paymentAmount
          }
        ],
        originalPrice: originalPrice,
        discount: discount,
        paymentAmount: paymentAmount,
        review: {
          reviewTime: review.createTime || '',
          starRating: review.rate || 0,
          comment: review.content || ''
        }
      };
    });
  }
  
  // 如果没有接收到review数据，使用默认的订单数据
  if (!eventChannel) {
    // 获取订单数据
    orderData.value = fetchOrderData(orderNumber);
  }
});
</script>

<style scoped>
.order-detail-container {
  padding: 16px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
}

.order-info-section,
.order-detail-section,
.price-section,
.review-section {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.info-item {
  display: flex;
  margin-bottom: 10px;
  align-items: flex-start;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  color: #666;
  min-width: 70px;
  flex-shrink: 0;
}

.info-value {
  color: #333;
  flex: 1;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.item-name {
  color: #333;
}

.item-price {
  color: #333;
  font-weight: 500;
}

.price-section {
  padding-bottom: 8px;
}

.price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.price-item:last-child {
  margin-bottom: 0;
}

.price-label {
  color: #666;
}

.price-value {
  color: #333;
}

.price-discount {
  color: #ff4d4f;
}

.price-total {
  color: #ff4d4f;
  font-weight: bold;
  font-size: 18px;
}

.price-item.total {
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
  margin-top: 8px;
}

.review-content {
  padding-top: 8px;
}

.review-time {
  color: #999;
  font-size: 14px;
  margin-bottom: 12px;
}

.review-stars {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.stars-label {
  color: #666;
  margin-right: 8px;
}

.stars {
  display: flex;
}

.star {
  color: #d9d9d9;
  font-size: 16px;
  margin-right: 2px;
}

.star.active {
  color: #ffaa00;
}

.review-comment {
  display: flex;
  flex-direction: column;
}

.comment-label {
  color: #666;
  margin-bottom: 8px;
}

.comment-text {
  color: #333;
  line-height: 1.5;
}
</style>